<template>
  <div v-on:click.right="rightMenuHandler" :class="{ beSelected }" class="ChatItemBox" @mouseover="isOver = true"
    @mouseleave="isOver = false">
    <div class="ChatItem">
      <div class="ChatAvatar">
        <n-image object-fit="cover" v-if="value.role === 'user' && chatSettings['base'].template['avatar']?.value[0]?.url"
          :src="chatSettings['base'].template['avatar']?.value[0]?.url" height="40" style="border-radius: 8px;" />
        <n-avatar v-else-if="value.role === 'system'" round size="large">
          <n-icon>
            <SettingsSharp />
          </n-icon>
        </n-avatar>
        <n-image v-else-if="value.role === 'assistant' && chatMap.get(currentChat)?.user?.avatar"
          :src="chatMap.get(currentChat)?.user?.avatar" height="40" style="border-radius: 8px;" />
        <n-avatar v-else-if="value.role === 'assistant' && !chatMap.get(currentChat)?.user" round
          size="large">AI</n-avatar>
        <n-avatar size="large" v-else round>默认</n-avatar>
      </div>
      <div>
        <div class="ChatRole">
          {{ value.role === 'system' ? 'system' : value.role === 'assistant' ? chatMap.get(currentChat)?.user?.name ??
            'AI' :
            chatSettings['base'].template['username'].value ?? '你' }}
        </div>
        <div class="ChatMessage" :class="{ generateError: value.status === '已失败' }">
          <ChatMessageContent v-model:value="value.content" />
        </div>
      </div>
    </div>
    <div style="height: 40px;">
      <n-dialog-provider>
        <ChatItemAction :index="index" :value="value" :show="isOver" />
      </n-dialog-provider>
    </div>
  </div>
  <RightMenu v-model:show="show" :event="event">
    <c-select @select="quickOperate" :options="options" v-if="show"></c-select>
  </RightMenu> 
</template>

<script setup lang='tsx'>
import { SettingsSharp } from '@vicons/material'
const { value, index } = defineProps<{
  value: Message,
  index: Number,
  beSelected: Boolean
}>()
const { chatSettings } = storeToRefs(chatSettingStore())
const { chatMap, currentChat } = storeToRefs(chatStore())
const isOver = ref(false)
const show = ref(false)
const rightMenuHandler = (mouseEvent: MouseEvent) => {
  show.value = true
  event.value = mouseEvent
}
const { retryMessage, deleteMessage } = useMessages()
const event = ref()
const quickOperate: any = (_key: string, op: typeof options[number]) => {
  op?.action?.()
  show.value = false
}
const options: SelectOptions[] = [{
  label: '复制',
  key: 'copy',
  action: () => {
    const clipboard = navigator.clipboard
    clipboard.writeText(value.content)
    show.value = false
  },
}, {
  label: '删除',
  key: 'delete',
  action: () => {
    deleteMessage(value.id as string)
    show.value = false
  },
}, {
  label: '使用预设重新生成',
  key: 'preChat',
  action: () => {
    const clipboard = navigator.clipboard
    clipboard.writeText(value.content)
  },
  children: computed(() => {
    const children = ObjectToKeyArray<string>(chatSettings.value['api'].backups)?.map(e => {
      const { key } = e;
      return {
        key: key,
        label: key,
        action: () => {
          retryMessage(value.id as string, chatSettings.value['api'].template);
          show.value = false
        }
      };
    });
    return children!;
  }) as unknown as SelectOptions['children']
}]
</script>
<style lang="scss">
.ChatItemBox {
  border: 1px solid #ffffff00;
  background: #d4d4d443;
  margin-top: 10px;
  padding: 10px;
  padding-top: 15px;
  border-radius: 8px;
}

@media screen and (max-width: 800px) {
  .ChatItem {
    flex-direction: column;
  }
}

.ChatItem {
  min-height: 52px;
  width: 100%;
  position: relative;
  display: flex;

  .ChatAvatar {
    min-width: 40px;
    height: 40px;
    margin-right: 15px;

    .n-image {
      width: 100%;
      height: 100%;
    }
  }

  .ChatRole {
    font-weight: 600;
    font-family: 'ali-600';
  }

  .ChatMessage {
    white-space: pre-wrap;
  }
}

.generateError {
  color: #f5222d !important;
}

.n-dialog {
  width: auto !important;
}

.beSelected {
  border-color: #7fe7c4;
}
</style>
